<navigation></navigation>


<div class="container">

    <div class="starter-template">
        <h1>Modules</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones
            HTML document.</p>
    </div>

    <h1>With validation</h1>
    <form #f="ngForm" novalidate>

        <div class="form-group">
            <label for="foodName">Name</label>
            <input type="text" name="foodName" class="form-control" id="foodName" placeholder="Foodname" [(ngModel)]="currentFood.name"
                required>

            <div *ngIf="f?.controls?.foodName?.hasError('required') && (f?.controls?.foodName?.dirty && !f.submitted)" class="alert alert-danger">
                *
            </div>
        </div>
        <div class="form-group">
            <label for="calories">Calories</label>
            <input type="text" class="form-control" id="calories" placeholder="Calories" [(ngModel)]="currentFood.calories" required
                isNumber isInRange name="calories" #calories="ngModel">

            <div *ngIf="calories.errors?.required && (calories?.dirty && !f.submitted)" class="alert alert-danger">
                *
            </div>

            <div *ngIf="calories.errors?.isNumber && (calories?.dirty && !f.submitted)" class="alert alert-danger">
                Please enter a number
            </div>

            <div *ngIf="calories?.errors?.isInRange && (calories?.dirty && !f.submitted)" class="alert alert-danger">
                Please enter a valid number (Integer-Range)
            </div>
        </div>
        <button type="submit" class="btn btn-primary" (click)="AddOrUpdateFoodWithValidation()" [disabled]="!f?.valid">Submit</button>
    </form>

</div>
<!-- /.container -->